<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView 5349612@qq.com Love9266- Create a 2D map</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" 	href="https://js.arcgis.com/4.6/esri/themes/light/main.css" />
    <script type="text/javascript" src="https://js.arcgis.com/4.6/init.js"></script>
    <script>
        require(["esri/Map",
                "esri/views/MapView",
                "esri/layers/BaseTileLayer",
                "esri/layers/support/TileInfo",
                "esri/geometry/SpatialReference",
                "esri/geometry/Extent",
                "esri/config",
                "esri/request"],
            function(Map, MapView,BaseTileLayer,TileInfo,SpatialReference,Extent,esriConfig, esriRequest) {

                var tileInfo = new TileInfo({
                    "dpi": 96,
                    "format": "image/png",
                    "compressionQuality": 0,
                    "spatialReference": new SpatialReference({
                        "wkid": 4326
                    }),
                    "rows": 256,
                    "cols": 256,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "lods": [
                        {"level": 0,"resolution": 1.4062500000002376,"scale": 590995186.11759996},
                        {"level": 1,"resolution": 0.703125000000119,"scale": 295497593.0588},
                        {"level": 2,"resolution": 0.351562500000059,"scale": 147748796.5294},
                        {"level": 3,"resolution": 0.17578125000003,"scale": 73874398.2647},
                        {"level": 4,"resolution": 0.0878906250000148,"scale": 36937199.1323},
                        {"level": 5,"resolution": 0.0439453125000074,"scale": 18468599.566175},
                        {"level": 6,"resolution": 0.0219726562500037,"scale": 9234299.7830875},
                        {"level": 7,"resolution": 0.0109863281250019,"scale": 4617149.89154375},
                        {"level": 8,"resolution": 0.00549316406250093,"scale": 2308574.94577187},
                        {"level": 9,"resolution": 0.00274658203125046,"scale": 1154287.47288594},
                        {"level": 10,"resolution": 0.00137329101562523,"scale": 577143.736442969},
                        {"level": 11,"resolution": 0.000686645507812616,"scale": 288571.868221484},
                        {"level": 12,"resolution": 0.000343322753906308,"scale": 144285.934110742},
                        {"level": 13,"resolution": 0.000171661376953154,"scale":72142.9670553711},
                        {"level": 14,"resolution": 8.5830688476577E-05,"scale": 36071.4835276855},
                        {"level": 15,"resolution": 4.29153442382885E-05,"scale": 18035.7417638428},
                        {"level": 16,"resolution": 2.14576721191443E-05,"scale": 9017.87088192139},
                        {"level": 17,"resolution": 1.07288360595721E-05,"scale": 4508.93544096069},
                        {"level": 18,"resolution": 5.36441802978606E-06,"scale": 2254.46772048035},
                        {"level": 19,"resolution": 2.68220901489303E-06,"scale": 1127.23386024017},
                        {"level": 20,"resolution": 1.34110450744652E-06,"scale": 563.616930120087}
                    ]
                });

                var tileExtent = new Extent(114.229839088925,33.9389305555556,123.400530149205,38.90481944444446, new SpatialReference({
                    'wkid': 4326
                }));

                //  var tileExtent = new Extent(-180,-90,180,90, new SpatialReference({
                //    'wkid': 4326
                // }));


                var MyCustomTileLayer = BaseTileLayer.createSubclass({
                    // properties of the custom tile layer
                    properties: {
                        urlTemplate: null,
                    },

                    // override getTileUrl()
                    // generate the tile url for a given level, row and column
                    getTileUrl: function (level, row, col) {
                        return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", row);
                    },

                    // This method fetches tiles for the specified level and size.
                    // Override this method to process the data returned from the server.
                    fetchTile: function (level, row, col, options) {

                        // call getTileUrl() method to construct the URL to tiles
                        // for a given level, row and col provided by the LayerView
                        var url = this.getTileUrl(level, row, col);

                        // request for tiles based on the generated url
                        // the signal option ensures that obsolete requests are aborted
                        return esriRequest(url, {
                            responseType: "image",
                            //signal: options && options.signal
                            allowImageDataAccess: true
                        })
                            .then(function (response) {
                                // when esri request resolves successfully
                                // get the image from the response
                                var image = response.data;
                                var width = this.tileInfo.size[0];
                                var height = this.tileInfo.size[0];

                                // create a canvas with 2D rendering context
                                var canvas = document.createElement("canvas");
                                var context = canvas.getContext("2d");
                                canvas.width = width;
                                canvas.height = height;

                                // Apply the tint color provided by
                                // by the application to the canvas
                                if (this.tint) {
                                    // Get a CSS color string in rgba form
                                    // representing the tint Color instance.
                                    context.fillStyle = this.tint.toCss();
                                    context.fillRect(0, 0, width, height);

                                    // Applies "difference" blending operation between canvas
                                    // and steman tiles. Difference blending operation subtracts
                                    // the bottom layer (canvas) from the top layer (tiles) or the
                                    // other way round to always get a positive value.
                                    context.globalCompositeOperation = "difference";
                                }

                                // Draw the blended image onto the canvas.
                                context.drawImage(image, 0, 0, width, height);

                                return canvas;
                            }.bind(this));
                    }

                });

                esriConfig.request.corsEnabledServers.push("t0.tianditu.gov.cn/vec_c");

                var mylayer = new MyCustomTileLayer({
                    //urlTemplate: "http://www.sdmap.gov.cn/tileservice/SDPubMap?layer=SDPubMap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={level}&TileCol={col}&TileRow={row}",
                    urlTemplate: "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=0f4e449733d7e3130129d9a1cc986df2&TileMatrix={level}&TileCol={col}&TileRow={row}",

                    tileInfo:tileInfo,
                    fullExtent:tileExtent
                });
                //mylayer.tileInfo = tileInfo;
                //mylayer.fullExtent= tileExtent;

                var map = new Map({
                    spatialReference:new SpatialReference({'wkid': 4326}),

                    basemap: {
                        baseLayers:[mylayer]
                    }


                });

                //map.layers.add(mylayer);

                var view = new MapView({
                    container: "viewDiv", // Reference to the scene div created in step 5
                    map: map, // Reference to the map object created before the scene
                    extent:tileExtent,
                    spatialReference:new SpatialReference({'wkid': 4326}),
                    scale:72142,
                    zoom: 18, // Sets zoom level based on level of detail (LOD)
                    center: [118.5, 35.5] // Sets center point of view using longitude,latitude
                });

                //view.goTo({center: [118.5, 35.5],scale:72142});
            });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
